<template>
  <div class="maskCenter">
    <div
      id="box"
      :class="visible ? 'open-content' : 'open-content-hide'"
      style="
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 670px;
        width: 750px;
      "
    >
      <div class="header" v-movew>
        <span class="title">表单属性</span>
        <el-tooltip
          class="item"
          effect="dark"
          content="关闭"
          placement="top-start"
        >
          <span
            class="icon iconfont iconbiaoqianlan-guanbi close"
            @click="hide"
          ></span>
        </el-tooltip>
      </div>
      <div class="body">
        <el-form :model="cellinfo" :rules="rules" ref="ruleForm">
          <div class="body-head">
            <el-form-item prop="version">
              <div class="head-item-left">
                <div class="head-lable" style="width: 80px; text-align: left">
                  版本：
                </div>
                <el-input
                  class="systemInput"
                  v-model="cellinfo.version"
                  style="margin-top: -4px; width: 60px"
                ></el-input>
              </div>
            </el-form-item>
            <div class="head-item-center">
              <div class="head-lable">状态：</div>
              <el-select
                class="systemInput"
                v-model="cellinfo.state"
                placeholder=""
                style="width: 107px"
              >
                <el-option
                  v-for="item in states"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="head-item-right">
              <div class="head-lable">描述：</div>
              <el-input class="systemInput" v-model="cellinfo.note"></el-input>
            </div>
            <div class="head-item-right">
              <!-- <div class="head-lable"></div> -->
              <el-checkbox style="margin-left:30px" v-model="cellinfo.isTWork">总表模式</el-checkbox>
              <el-checkbox style="margin-left:30px" v-model="cellinfo.isQrCodeShow">二维码</el-checkbox>
            </div>
          </div>
          <div class="row">
            <div class="row-item-one">
              <div class="row-item-lable" style="text-align: left">
                通知内容：
              </div>
              <el-input
                class="systemInput"
                v-model="cellinfo.notice"
              ></el-input>
            </div>
          </div>
          <!-- <div class="row">
            <div class="row-item-one">
              <div class="row-item-lable" style="text-align: left">
                二维码：
              </div>
              <el-input
                class="systemInput"
                v-model="cellinfo.qrCode"
              ></el-input>
            </div>
          </div> -->
          <div class="body-content">
            <el-tabs v-model="activeName">
              <el-tab-pane label="引用数据表" name="table">
                <div class="row-title" style="margin-top: 10px">
                  <span style="display: inline-block; width: 70px">数据源</span>
                  <el-select v-model="dataSourceId" placeholder="请选择数据源" @change="optionsChange">
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                </el-select>
                <span style="display: inline-block; width: 80px; margin-left: 50px">检索表</span>
                  <el-input
                    class="systemInput"
                    v-model="tbls"
                    @change="getTableList"
                    style="width: 200px;"
                  ></el-input>
                </div>
                <!-- <div class="row-title">
                  
                </div> -->
                <div class="tables">
                  <div class="db-table">
                    <div
                      class="div-item"
                      v-for="(item, index) in tableinfo"
                      @click="setTableIndex(item, index)"
                      :class="{
                        'div-item-active': activetableItemIndex == index,
                      }"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="toolbtns">
                    <div class="toolbtn" @click="addTableitem">
                      <i class="el-icon-right"></i>
                    </div>
                    <div class="toolbtn" @click="delTableitem">
                      <i class="el-icon-back"></i>
                    </div>
                    <div class="toolbtn" @click="tableup">
                      <i class="el-icon-top"></i>
                    </div>
                    <div class="toolbtn" @click="tabledown">
                      <i class="el-icon-bottom"></i>
                    </div>
                  </div>
                  <div class="db-table">
                    <div
                      class="div-item"
                      v-for="(item, index) in cellinfo.table"
                      @click="setSelTableIndex(item, index)"
                      :class="{
                        'div-item-active': activeSeltableItemIndex == index,
                      }"
                    >
                      {{ item.tableName }}
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="row-item-three">
                    <div class="row-item-lable">主键字段：</div>
                    <el-input
                      class="systemInput"
                      v-model="activeSeltableItem.pkey"
                    ></el-input>
                  </div>
                  <div class="row-item-three row-item-right">
                    <div class="row-item-lable">外键字段：</div>
                    <el-input
                      class="systemInput"
                      v-model="activeSeltableItem.fkey"
                    ></el-input>
                  </div>
                  <div class="row-item-three row-item-right">
                    <div class="row-item-lable">排序字段：</div>
                    <el-input
                      class="systemInput"
                      v-model="activeSeltableItem.okey"
                    ></el-input>
                  </div>
                  <div class="wrong-div" v-if="ruleMsg['pkey'].error">
                    {{ ruleMsg["pkey"].msg }}
                  </div>
                </div>
                <div class="row">
                  <div class="row-item-one">
                    <div class="row-item-lable">运行参数：</div>
                    <el-input
                      class="systemInput"
                      v-model="activeSeltableItem.param"
                    ></el-input>
                  </div>
                  <div class="wrong-div" v-if="ruleMsg['param'].error">
                    {{ ruleMsg["param"].msg }}
                  </div>
                </div>
                <div class="row">
                  <div class="row-item-three">
                    <div class="row-item-lable">预定行数：</div>
                    <el-input
                      class="systemInput"
                      v-model="activeSeltableItem.rowNum"
                    ></el-input>
                  </div>
                  <div class="row-item-three row-item-right">
                    <div class="row-item-lable">最多行数：</div>
                    <el-input
                      class="systemInput"
                      v-model="activeSeltableItem.pageSize"
                    ></el-input>
                  </div>
                  <!--								<div class="row-item-three row-item-right">-->
                  <!--									<div class="row-item-lable" style="width: 105px;">是否可以多行:</div>-->
                  <!--									<el-switch class="systemSwitch" disabled v-model="activeSeltableItem.addRow" style="margin-top: 6px;"></el-switch>-->
                  <!--								</div>-->
                </div>
              </el-tab-pane>
              <el-tab-pane label="引用流程" name="flow">
                <div class="row-title" style="width: 50%; float: left">
                  <span style="display: inline-block; width: 80px"
                    >引用流程</span
                  >
                  <el-input
                    class="systemInput"
                    v-model="cellinfo.wfVar"
                    placeholder='流程自定义变量：{"gcid":"[0:xxx]"}'
                  ></el-input>
                </div>
                <div class="row-title" style="width: 50%; float: left">
                  <span style="display: inline-block; width: 120px"
                    >业务模型参数</span
                  >
                  <el-input
                    class="systemInput"
                    v-model="cellinfo.wpVar"
                    placeholder='参数自定义变量：{"gcid":"[0:xxx]"}'
                  ></el-input>
                </div>
                <div class="row-title" style="width: 50%; float: left">
                  <span style="display: inline-block; width: 80px"
                    >流程搜索</span
                  >
                  <el-input
                    class="systemInput"
                    placeholder='请输入流程'
                    v-model="searchFlow"
                    @keyup.enter.native="searchEnterFun"
                  ></el-input>
                </div>
                <div class="tables setHeight">
                  <div class="db-table">
                    <div
                      class="div-item"
                      v-for="(item, index) in flowinfo"
                      @click="setFlowIndex(item, index)"
                      :class="{
                        'div-item-active': activeFlowItemIndex == index,
                      }"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="toolbtns settop">
                    <div class="toolbtn" @click="addFlowitem">
                      <i class="el-icon-right"></i>
                    </div>
                    <div class="toolbtn" @click="delFlowitem">
                      <i class="el-icon-back"></i>
                    </div>
                    <div class="toolbtn" @click="flowup">
                      <i class="el-icon-top"></i>
                    </div>
                    <div class="toolbtn" @click="flowdown">
                      <i class="el-icon-bottom"></i>
                    </div>
                  </div>
                  <div class="db-table">
                    <div
                      class="div-item"
                      v-for="(item, index) in cellinfo.wf"
                      @click="setSelFlowIndex(item, index)"
                      :class="{
                        'div-item-active': activeSelFlowItemIndex == index,
                      }"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="变量设置" name="vars">
                <div class="row-title">
                  <div class="row-title-first">系统变量</div>
                  <div class="row-title-second">自定义变量</div>
                  <div class="row-title-third btnConfirm" @click="showWindVar">
                    <span
                      class="iconfont iconzengjia"
                      style="
                        height: 28px;
                        line-height: 26px;
                        width: 13px;
                        margin-right: 6px;
                        color: rgba(131, 141, 251, 1);
                      "
                    ></span>
                    <span style="color: var(--system-button-text-color)"
                      >新增</span
                    >
                  </div>
                </div>
                <div class="tables setHeight" style="height:380px;">
                  <div class="db-table"></div>
                  <div class="toolbtns settop">
                    <div class="toolbtn"><i class="el-icon-right"></i></div>
                    <div class="toolbtn" @click="delVarItem">
                      <i class="el-icon-back"></i>
                    </div>
                    <div class="toolbtn" @click="varUp">
                      <i class="el-icon-top"></i>
                    </div>
                    <div class="toolbtn" @click="varDown">
                      <i class="el-icon-bottom"></i>
                    </div>
                  </div>
                  <div class="db-table">
                    <div
                      class="div-item"
                      v-for="(item, index) in cellinfo.var"
                      @click="setSelVarIndex(item, index)"
                      @dblclick="editVar(item, index)"
                      :class="{
                        'div-item-active': activeVarItemIndex == index,
                      }"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="隐藏字段" name="fields">
                <div class="row-title">
                  <div style="margin-right: 20px">字段表:</div>
                  <el-select
                    class="systemInput"
                    v-model="selecttable"
                    placeholder=""
                    style="width: 243px"
                    @change="getField"
                  >
                    <el-option
                      v-for="(item, index) in cellinfo.table"
                      :key="index"
                      :label="item.tableName"
                      :value="index"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="tables setHeight" style="height:380px;">
                  <div class="db-table">
                    <div
                      class="div-item"
                      v-for="(item, index) in hfield"
                      @click="sethfieldIndex(item, index)"
                      :class="{
                        'div-item-active': activehfieldItemIndex == index,
                      }"
                    >
                      {{ item.fieldName }}
                    </div>
                  </div>
                  <div class="toolbtns settop">
                    <div class="toolbtn" @click="addhfielditem">
                      <i class="el-icon-right"></i>
                    </div>
                    <div class="toolbtn" @click="delhfielditem">
                      <i class="el-icon-back"></i>
                    </div>
                    <div class="toolbtn" @click="hfieldup">
                      <i class="el-icon-top"></i>
                    </div>
                    <div class="toolbtn" @click="hfielddown">
                      <i class="el-icon-bottom"></i>
                    </div>
                  </div>
                  <div class="db-table">
                    <div
                      class="div-item"
                      v-for="(item, index) in cellinfo.hField"
                      @click="setSelhfieldIndex(item, index)"
                      @dblclick="showFieldWin(item)"
                      :class="{
                        'div-item-active': activeSelhfieldItemIndex == index,
                      }"
                    >
                      <el-col :span="12">
                        {{ item.fieldName }}
                      </el-col>
                      <el-col :span="12">
                        {{ item.code }}
                      </el-col>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="初始sql" name="initSql">
                <el-input
                  class="systemInput"
                  type="textarea"
                  :autosize="{ minRows: 18, maxRows: 18 }"
                  v-model="cellinfo.initSql"
                  :resize="'none'"
                  @click.native="initSql1"
                >
                </el-input>
              </el-tab-pane>
              <el-tab-pane label="按钮设置" name="buttonSet">
                <el-row>
                  <el-col :span="12">
                    <div class="systemButtonConfirm btn" @click="addBtnitem">
                      新增
                    </div>
                    <div class="systemButtonConfirm btn" @click="delBtnitem">
                      删除
                    </div>
                    <div class="systemButtonConfirm btn" @click="btnup">
                      上移
                    </div>
                    <div class="systemButtonConfirm btn" @click="btndown">
                      下移
                    </div>
                    <div class="tables setHeight" style="height:384px;">
                      <div class="db-table">
                        <div
                          class="div-item"
                          v-for="(item, index) in btnList"
                          :key="index"
                          @click="setBtnIndex(item, index)"
                          :class="{
                            'div-item-active': btnIndex == index,
                          }"
                        >
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <!-- 编辑 -->
                    <div class="btnEdit" v-if="!newBtn">
                      <el-form
                        class="systemForm"
                        label-width="80px"
                        label-position="left"
                      >
                        <el-form-item label="按钮名称:">
                          <el-input
                            v-model="btnList[btnIndex].name"
                            class="systemInput"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label="按钮编码:">
                          <el-input
                            v-model="btnList[btnIndex].code"
                            class="systemInput"
                          ></el-input>
                        </el-form-item>
                        <el-form-item v-show="availableNode"  label="可用节点:" >
                          <el-input
                            class="systemInput"
                            v-model="btnList[btnIndex].wfNode"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label="执行方式:" >
                          <el-select
                            class="systemInput"
                            v-model="btnList[btnIndex].executeType"
                          >
                            <el-option
                              v-for="item in executeType"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item
                          label="执行脚本:"
                          style="height: 192px"
                          v-if="btnList[btnIndex].executeType == 0"
                        >
                          <el-input
                            @click.native="opCode(btnList[btnIndex].params)"
                            type="textarea"
                            :rows="9"
                            resize="none"
                            v-model="btnList[btnIndex].params"
                          >
                          </el-input>
                          <el-dialog
                            :visible.sync="CodeDialogVisible"
                            width="80%"
                            append-to-body>
                            <!-- <codemirror
                              style="text-align:left;height:300px"
                              ref="mycode"
                              v-model="btnList[btnIndex].params"
                              :options="cmOptions"
                              class="code"
                            >
                            </codemirror> -->
                            <el-button type="primary" size="mini" plain @click="codeFormatte" style="margin-left: 20px;">格式化</el-button>
                            <div>
                              <el-row :gutter="20">
                                <el-col :span="18">
                                  <div style="height:450px">
                                    <codeMirrorIDE ref="codeMirrorIDERef" style="overflow-y: auto;height:100%;width:100%"></codeMirrorIDE>
                                  </div>
                                </el-col>
                                <el-col :span="6">
                                  <div style="border-left-width:1px;border-left-style:solid;border-left-color:black;padding-left:5px">
                                    <funTree @write="writeScp"/>
                                  </div>
                                </el-col>
                              </el-row>
                            </div>
                            <!-- <codeMirrorIDE ref="codeMirrorIDERef" style="overflow-y: auto;height:100%"></codeMirrorIDE> -->
                            
                            <span slot="footer" class="dialog-footer">
                              <el-button type="primary" @click="codeDialogVisible(btnIndex)">确 定</el-button>
                              <el-button @click="CodeDialogVisible = false">取 消</el-button>
                            </span>
                          </el-dialog>
                        </el-form-item>
                        <el-form-item
                          label="请求类型:"
                          v-if="btnList[btnIndex].executeType == 1"
                        >
                          <el-select
                            class="systemInput"
                            v-model="btnList[btnIndex].contentType"
                          >
                            <el-option
                              v-for="item in contentTypeMap"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item
                          label="请求地址:"
                          v-if="btnList[btnIndex].executeType == 1"
                        >
                          <el-input
                            class="systemInput"
                            v-model="btnList[btnIndex].url"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          label="请求参数:"
                          v-if="btnList[btnIndex].executeType == 1"
                        >
                          <el-input
                            class="systemInput"
                            v-model="btnList[btnIndex].params"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          label="窗体类型:"
                          v-if="btnList[btnIndex].executeType == 1"
                        >
                          <el-select
                            class="systemInput"
                            v-model="btnList[btnIndex].formType"
                            @change="winTypeChange"
                          >
                            <el-option
                              v-for="item in windowTypeMap"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item
                          label="关联窗体:"
                          v-if="btnList[btnIndex].executeType == 1 && btnList[btnIndex].formType == 2 "
                        >
                          <el-input
                            class="systemInput"
                            v-model="formObjName"
                            placeholder="请选择窗体"
                            @dblclick.native="handleComSelect"
                          ></el-input>
                        </el-form-item>
                        <!-- <el-form-item
                          label="执行脚本:"
                          style="height: 120px"
                          v-if="btnList[btnIndex].executeType == 1"
                        >
                          <el-input
                            type="textarea"
                            :rows="9"
                            resize="none"
                            v-model="btnList[btnIndex].params"
                          >
                          </el-input>
                        </el-form-item> -->
                      </el-form>
                    </div>
                    <!-- 新增按钮 -->
                    <div
                      :class="newBtnBtn ? 'btnAdd' : 'btnEdit'"
                      v-if="newBtn"
                    >
                      <el-form
                        class="systemForm"
                        label-width="80px"
                        label-position="left"
                      >
                        <el-form-item label="按钮名称:">
                          <el-input
                            v-model="btnData.name"
                            class="systemInput"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label="按钮编码:">
                          <el-input
                            v-model="btnData.code"
                            class="systemInput"
                          ></el-input>
                        </el-form-item>
                        <el-form-item v-show="availableNode" label="可用节点:">
                          <el-input
                            class="systemInput"
                            @click.native="inputClick"
                            v-model="btnData.wfNode"
                          ></el-input>
                        </el-form-item>
                        <el-form-item v-show="availableNode" label="执行方式:">
                          <el-select
                            class="systemInput"
                            v-model="btnData.executeType"
                          >
                            <el-option
                              v-for="item in executeType"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item
                          label="执行脚本:"
                          style="height: 260px"
                          v-if="btnData.executeType == 0"
                        >
                          <el-input
                            type="textarea"
                            :rows="14"
                            resize="none"
                            v-model="btnData.params"
                            @click.native="opCode1(btnData.params)"
                          >
                          </el-input>
                          <el-dialog
                            :visible.sync="CodeDialogVisible1"
                            width="80%"
                            :close-on-click-modal = false
                            append-to-body>
                            <!-- <codemirror
                              style="text-align:left"
                              ref="mycode"
                              v-model="btnData.params"
                              :options="cmOptions"
                              class="code"
                            >
                            </codemirror> -->
                            <el-button type="primary" size="mini" plain @click="codeFormatte" style="margin-left: 20px;">格式化</el-button>
                            <div>
                              <el-row :gutter="20">
                                <el-col :span="18">
                                  <div style="height:450px">
                                    <codeMirrorIDE ref="codeMirrorIDERef" style="overflow-y: auto;height:100%;width:100%"></codeMirrorIDE>
                                  </div>
                                </el-col>
                                <el-col :span="6">
                                  <div style="border-left-width:1px;border-left-style:solid;border-left-color:black;padding-left:5px">
                                    <funTree @write="writeScp"/>
                                  </div>
                                </el-col>
                              </el-row>
                              
                              <!-- <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                :value="promptText">
                              </el-input> -->
                              
                            </div>
                            <span slot="footer" class="dialog-footer">
                              <el-button type="primary" @click="codeDialogVisible1">确 定</el-button>
                              <el-button @click="CodeDialogVisible1 = false">取 消</el-button>
                            </span>
                          </el-dialog>
                        </el-form-item>
                        <!-- <el-form-item
                          label="请求类型:"
                          v-if="btnData.executeType == 1"
                        >
                          <el-select
                            class="systemInput"
                            v-model="btnData.contentType"
                          >
                            <el-option
                              v-for="item in contentTypeMap"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </el-form-item> -->
                        <!-- <el-form-item
                          label="请求地址:"
                          v-if="btnData.executeType == 1"
                        >
                          <el-input
                            class="systemInput"
                            v-model="btnData.url"
                          ></el-input>
                        </el-form-item> -->
                        <!-- <el-form-item
                          label="请求参数:"
                          v-if="btnData.executeType == 1"
                        >
                          <el-input
                            class="systemInput"
                            v-model="btnData.params"
                          ></el-input>
                        </el-form-item> -->
                        <!-- <el-form-item
                          label="窗体类型:"
                          v-if="btnData.executeType == 1"
                        >
                          <el-select
                            class="systemInput"
                            v-model="btnData.formType"
                          >
                            <el-option
                              v-for="item in windowTypeMap"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item> -->
                        <el-form-item
                          label="关联窗体:"
                          v-if="btnData.executeType == 1 && btnData.formType == 2"
                        >
                          <el-input
                            class="systemInput"
                            v-model="formObjName"
                            placeholder="请选择窗体"
                            @dblclick.native="handleComSelect"
                          ></el-input>
                        </el-form-item>
                      </el-form>
                    </div>
                    <div style="margin-top: 10px">
                      <div
                        v-if="newBtnBtn"
                        class="systemButtonConfirm btn"
                        @click="addBtnCreate"
                      >
                        确认
                      </div>
                      <div
                        v-if="newBtnBtn"
                        class="systemButtonConfirm btn"
                        @click="addBtnCancle"
                      >
                        取消
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="初始脚本" name="initJs">
                <el-input
                  class="systemInput"
                  type="textarea"
                  :autosize="{ minRows: 18, maxRows: 18 }"
                  v-model="cellinfo.initJs"
                  :resize="'none'"
                  @click.native="initJs1"
                >
                </el-input>
              </el-tab-pane>
              <el-tab-pane label="保存脚本" name="afterSaveJs">
                <el-input
                  class="systemInput"
                  type="textarea"
                  :autosize="{ minRows: 18, maxRows: 18 }"
                  v-model="cellinfo.afterSaveJs"
                  :resize="'none'"
                  @click.native="afterSaveJs1"
                >
                </el-input>
              </el-tab-pane>
              <el-tab-pane label="启动脚本" name="beforeSendJs">
                <el-input
                  class="systemInput"
                  type="textarea"
                  :autosize="{ minRows: 18, maxRows: 18 }"
                  v-model="cellinfo.beforeSendJs"
                  :resize="'none'"
                  @click.native="beforeSendJs1"
                >
                </el-input>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-form>
      </div>
      <div class="footer">
        <div
          class="systemButtonConfirm"
          style="margin-right: 10px; margin-top: 28px"
          @click="okclick"
        >
          <span>确认</span>
        </div>
        <div class="systemButtonConfirm" style="margin-top: 28px" @click="hide">
          <span>取消</span>
        </div>
      </div>
      <winCellVar
        v-if="showWinVar"
        @close="closeWinVar"
        @ok="addVar"
        :activeVar="activeVar"
      ></winCellVar>
      <winfield
        v-if="showfield"
        @close="showfield = false"
        :activeItem="field"
        @ok="setfield"
      ></winfield>
    </div>
    <winComSelect
      v-if="relatedPageShow"
      :pcomevents="formObj"
      @close="closeWinCom"
      @ok="saveWinCom"
    ></winComSelect>
    <div v-if="wfDialogVisible" class="wfDialog" :style="wfPositionStyle">
      <el-radio-group v-model="wfType" @change="wfTypeChange">
        <el-radio :label="3">部分</el-radio>
        <el-radio :label="6">全部</el-radio>
        <el-radio :label="9">禁用</el-radio>
      </el-radio-group>
      <div
        class="wfMapStyle"
        v-for="item in wfMap"
        :key="item.id"
        :value="item.id"
      >
        <span class="wfName">{{ item.name }}</span>
        <el-checkbox
          class="wfCheckbox"
          style="font-size: 22px"
          :disabled="wfChoosable"
          v-model="wfCheckboxMap[check.code]"
          v-for="check in wfNodeMap[item.id]"
          :label="check.code"
          @change="wfNodeChange()"
          >{{ check.name }}
        </el-checkbox>
      </div>
    </div>
    <el-dialog
      :visible.sync="CodeDialogVisible2"
      width="80%"
      :close-on-click-modal = false
      append-to-body>
      <el-button type="primary" size="mini" plain @click="codeFormatte" style="margin-left: 20px;">格式化</el-button>
      <div>
        <el-row :gutter="20">
          <el-col :span="18">
            <div style="height:450px">
              <codeMirrorIDE ref="codeMirrorIDERef" style="overflow-y: auto;height:100%;width:100%"></codeMirrorIDE>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="border-left-width:1px;border-left-style:solid;border-left-color:black;padding-left:5px">
              <funTree @write="writeScp"/>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="codeDialogVisible2">确 定</el-button>
        <el-button @click="CodeDialogVisible2 = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="CodeDialogVisible3"
      width="80%"
      :close-on-click-modal = false
      append-to-body>
      <el-button type="primary" size="mini" plain @click="codeFormatte" style="margin-left: 20px;">格式化</el-button>
      <div>
        <el-row :gutter="20">
          <el-col :span="18">
            <div style="height:450px">
              <codeMirrorIDE ref="codeMirrorIDERef" style="overflow-y: auto;height:100%;width:100%"></codeMirrorIDE>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="border-left-width:1px;border-left-style:solid;border-left-color:black;padding-left:5px">
              <funTree @write="writeScp"/>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="codeDialogVisible3">确 定</el-button>
        <el-button @click="CodeDialogVisible3 = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="CodeDialogVisible4"
      width="80%"
      :close-on-click-modal = false
      append-to-body>
      <el-button type="primary" size="mini" plain @click="codeFormatte" style="margin-left: 20px;">格式化</el-button>
      <div>
        <el-row :gutter="20">
          <el-col :span="18">
            <div style="height:450px">
              <codeMirrorIDE ref="codeMirrorIDERef" style="overflow-y: auto;height:100%;width:100%"></codeMirrorIDE>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="border-left-width:1px;border-left-style:solid;border-left-color:black;padding-left:5px">
              <funTree @write="writeScp"/>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="codeDialogVisible4">确 定</el-button>
        <el-button @click="CodeDialogVisible4 = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="CodeDialogVisible5"
      width="80%"
      :close-on-click-modal = false
      append-to-body>
      <el-button type="primary" size="mini" plain @click="codeFormatte" style="margin-left: 20px;">格式化</el-button>
      <div>
        <el-row :gutter="20">
          <el-col :span="18">
            <div style="height:450px">
              <codeMirrorIDE ref="codeMirrorIDERef" style="overflow-y: auto;height:100%;width:100%"></codeMirrorIDE>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="border-left-width:1px;border-left-style:solid;border-left-color:black;padding-left:5px">
              <funTree @write="writeScp"/>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="codeDialogVisible5">确 定</el-button>
        <el-button @click="CodeDialogVisible5 = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import movew from "@/directives/winmove";
import winCellVar from "@/system/components/winCellVar.vue";
import { deepCopy } from "@/utils/public";
import { tableList } from "@/system/api/cellEdit";
import { workflowclassquery } from "@/system/api/flowManage";
import { listColumns } from "@/system/api/cellEdit";
import winfield from "@/system/components/winfield.vue";
import winComSelect from "@/system/components/winComSelect.vue";
import { dataOriginAll } from '@/system/api/listStructure.js';
//TODO   编辑器引入
import { codemirror } from "vue-codemirror";
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
import "codemirror/theme/rubyblue.css"; // 引入主题,配置后生效
import "codemirror/theme/mdn-like.css";
//require("codemirror/mode/javascript/javascript.js"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
import "codemirror/mode/javascript/javascript";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/selection/active-line"; //光标行背景高亮，配置里面也需要styleActiveLine设置为true
import "codemirror/keymap/sublime"; //sublime编辑器效果
import "codemirror/mode/css/css";
import "codemirror/theme/monokai.css"; //编辑器主题样式，配置里面theme需要设置monokai
//下面这几个引入的主要是验证提示类的,配置里的lint需要设置true,gutters: ['CodeMirror-lint-markers']
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/json-lint";
import "codemirror/addon/display/autorefresh"; //及时自动更新，配置里面也需要设置autoRefresh为true
import codeMirrorIDE from '@/system/components/codeMirrorIDE'
import funTree from '@/system/pages/customPage/funTree.vue'
export default {
  directives: { movew },
  name: "winCellAttr",
  inject: ["sCell"],
  components: {
    winCellVar,
    winfield,
    winComSelect,
    codeMirrorIDE,
    funTree
  },
  data() {
    return {
      availableNode: false,
      searchFlow: '',
      options: [],
      dataSourceId: '',
      wfType: [],
      visible: true,
      activeName: "table",
      states: [
        { value: true, label: "启用" },
        { value: false, label: "停用" },
      ],
      selecttable: null,
      htables: [
        { value: 1, label: "table1" },
        { value: 0, label: "table0" },
      ],
      hfield: [],
      cellinfo: { default: null },
      tableinfo: [],
      flowinfo: [],
      hideinfo: [],
      activetableItemIndex: -1,
      activetableItem: null,
      activeSeltableItemIndex: -1,
      activeVarItem: null,
      activeVar: null,
      activeVarItemIndex: -1,
      activeSeltableItem: {},
      activeFlowItemIndex: -1,
      activeFlowItem: null,
      activeSelFlowItemIndex: -1,
      activeSelFlowItem: {},
      activehfieldItemIndex: -1,
      activehfieldItem: null,
      activeSelhfieldItemIndex: -1,
      activeSelhfieldItem: {},
      temptable: {
        id: null,
        tableName: null, //表名
        code: null, //编码,
        repId: null, //表单id
        ord: null, //序号
        rowNum: null, //预定义行数
        param: null, //运行参数
        pkey: null, //主键字段名
        fkey: null, //外键字段名
        okey: null, //排序字段名
        paging: false, //分页显示
        pageSize: 10, //每页记录数
      },
      temvar: {
        id: null, //id ,//
        name: null, //变量名称 ,//
        code: null, //编码 ,//
        repId: null, //表单id ,//
        value: null, //缺省值
      },
      thField: {
        tableIdx: -1,
        fieldName: null,
        fieldType: null,
        isHide: 1,
        wfNode: "999999",
      },
      showWinVar: false,
      showfield: false,
      rules: {
        version: [{ required: true, message: "请输入版本号", trigger: "blur" }],
        pkey: [
          { required: true, message: "请输入主键", trigger: "blur" },
          { min: 1, max: 32, message: "长度在 1 到 32个字符", trigger: "blur" },
        ],
        param: [
          { required: true, message: "请输入运行参数", trigger: "blur" },
          {
            min: 1,
            max: 512,
            message: "长度在 1 到 512个字符",
            trigger: "blur",
          },
        ],
      },
      ruleMsg: {
        pkey: {
          error: false,
          msg: "",
        },
        param: {
          error: false,
          msg: "",
        },
      },
      field: null,
      tbls: null, //按表名查询
      windowTypeMap: [
        { value: 0, label: "无" },
        { value: 1, label: "模块" },
        { value: 2, label: "弹窗" },
      ],
      contentTypeMap: [
        { value: 1, label: "键值对" },
        { value: 2, label: "JSON" },
      ],
      executeType: [
        { value: 0, label: "自定义按钮" },
        // { value: 1, label: "自定义按钮" },
      ],
      btnList: [],
      params: "",
      newBtn: true, //添加按钮中的确认
      newBtnBtn: false, //添加按钮中的取消
      btnIndex: 0,
      btnData: {
        name: "", //按钮名称
        code: "", //按钮编码
        contentType: "", //请求类型
        url: "", // 请求地址
        params: "", //请求参数或者执行脚本
        formType: 1, //窗体类型
        formObj: "", //关联窗体
        executeType: 0, //执行方式
        wfNode: "999999", //可用节点
      },
      relatedPageShow: false,
      formObj:{},
      formObjName: "",
      wfCheckboxMap: {},
      wfDialogVisible: false,
      CodeDialogVisible: false,
      CodeDialogVisible1:false,
      CodeDialogVisible2:false,
      CodeDialogVisible3:false,
      CodeDialogVisible4:false,
      CodeDialogVisible5:false,
      cmOptions: {
        value: "",
        mode: "text/javascript",
        theme: "mdn-like", //ambiance 黑色  darcula白色  rubyblue
        readOnly: false, //是否只读
        lineNumbers: true, //是否显示行数
        lineWrapping: false,
        extraKeys: { Ctrl: "autocomplete" }, //按键配置
        lineWiseCopyCut: true,
        showCursorWhenSelecting: true,
        matchBrackets: true, //括号匹配
        line: true,
        styleActiveLine: true, // 高亮选中行
        hintOptions: {
          completeSingle: true, // 当匹配只有一项的时候是否自动补全
        },
      },
    };
  },
  props: {
    microId: {
      //类id   classId
      default: null,
    },
  },
  created() {
    this.dataOriginAll()
  },
  mounted() {
    this.dataSourceId = this.microId
    this.cellinfo = deepCopy(this.sCell.cellinfo);
    this.btnList = this.cellinfo.button;
    console.log('初始化',this.sCell.cellinfo);
    try {
      if (typeof this.btnList[0].formObj != "undefined") {
        if (this.btnList[0].formObj !== null) {
          this.formObj=JSON.parse(this.btnList[0].formObj);
          this.formObjName = JSON.parse(this.btnList[0].formObj).dblcomText;
        } else {
          this.formObjName = "";
        }
      }
    } catch (e) {
      console.log(e)
    }
    try {
        if (this.btnList.length > 0) {
        this.newBtn = false;
        this.btnIndex = 0;
      }
    } catch (e) {
      console.log(e)
    }
    if (this.cellinfo.id == null) {
      this.$set(this.cellinfo, "state", true);
    }
    if (this.cellinfo.id == null) {
      this.$set(this.cellinfo, "isTWork", true);
    }
    this.getTableList();
    this.getFlowList();
    this.init();
  },
  methods: {
    async searchEnterFun(){ // 流程搜索
      console.log(this.searchFlow);
      let params = {}
      params.content = this.searchFlow
      // console.log(params);
      try{
        const data = await workflowclassquery(params)
        if(data.code == 200){
          this.flowinfo = data.info;
        }else{
          console.log('出错了');
        }
      }catch{}
    },
    optionsChange(id) {
      // this.cellinfo.table = [] // 清空右侧选中数据
      this.$emit('changeMicroId', this.dataSourceId)
      // this.microId = id
      this.tableinfo = []
      this.getTableList()
    },
    //微服务刷新
    async dataOriginAll() {
      this.options = []
      const originAll = await dataOriginAll()
      console.log('获取微服务信息',originAll);
      if(originAll.code == 200){
        originAll.info.map(item =>{
          this.options.push(item)
        })
      }else{
        this.$message('获取微服务失败')
      }
    },
    init() {
      //初始化选中的table
      if (this.cellinfo.table.length > 0) {
        this.activeSeltableItemIndex = 0;
        this.activeSeltableItem = this.cellinfo.table[0];
        //初始化 选中的表
        this.selecttable = this.cellinfo.table[0].tableName;
        //初始化 隐藏字段的表
        this.getField(0);
      }
      //取cellinfo的js  不用从tableset 取js
      //				if(this.sCell.cellinfo.initJs == null){//如果没有初始脚本 则向 tableset 中取
      //					this.$set(this.cellinfo,'initJs',this.sCell.tableset.initJs);
      //				}
      //				if(this.sCell.cellinfo.afterSaveJs == null){//如果没有初始脚本 则向 tableset 中取
      //					this.$set(this.cellinfo,'afterSaveJs',this.sCell.tableset.afterSaveJs);
      //				}
      //				if(this.sCell.cellinfo.beforeSendJs == null){//如果没有初始脚本 则向 tableset 中取
      //					this.$set(this.cellinfo,'beforeSendJs',this.sCell.tableset.beforeSendJs);
      //				}
      //
      //				if(this.sCell.cellinfo.qrCode == null){//如果没有初始脚本 则向 tableset 中取
      //					this.$set(this.cellinfo,'qrCode','{type:[type],workId:[workId],wpId:[wpId],tablename:"[tablename]"}');
      //				}
    },
    hide() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("close");
      }, 400);
    },
    okclick() {
      let terror = false;
      for (let i = 0; i < this.cellinfo.table.length; i++) {
        terror = false;
        let table = this.cellinfo.table[i];
        if (!table.pkey || table.pkey == "") {
          this.ruleMsg.pkey.error = true;
          this.ruleMsg.pkey.msg = "请输入主键";
          terror = true;
        } else {
          if (table.pkey.length > 32) {
            this.ruleMsg.pkey.error = true;
            this.ruleMsg.pkey.msg = "长度在 1 到 32个字符";
            terror = true;
          } else {
            this.ruleMsg.pkey.error = false;
          }
        }
        if (!table.param || table.param == "") {
          this.ruleMsg.param.error = true;
          this.ruleMsg.param.msg = "请输入运行参数";
          terror = true;
        } else {
          if (table.pkey.length > 512) {
            this.ruleMsg.pkey.error = true;
            this.ruleMsg.pkey.msg = "长度在 1 到 512个字符";
            terror = true;
          } else {
            this.ruleMsg.pkey.error = false;
          }
        }
        if (terror) {
          this.activeSeltableItem = table;
          this.activeSeltableItemIndex = i;
          break;
        }
      }
      if (!terror) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.visible = false;
            this.setord();
            setTimeout(() => {
              let cleartalbe = [];

              //变更隐藏字段 table 索引
              let hField = [];
              this.cellinfo.hField.forEach((hf, hfindex) => {
                console.log(hf)
                this.cellinfo.table.forEach((tb, index) => {
                  console.log(tb)
                  if (hf.code == tb.tableName) {
                    //在设置隐藏字段的时候，把code 赋值成 tableName  ，提交的时候校验下，隐藏字段的索引
                    hf.tableIdx = index;
                    let hfObj={};
                    if(hf.hasOwnProperty("autoEvent")){
                      hfObj["code"]=hf["code"];
                      hfObj["fieldName"]=hf["fieldName"];
                      hfObj["fieldType"]=hf["fieldType"];
                      hfObj["isHide"]=hf["isHide"]
                      hfObj["tableIdx"]=index;
                      hfObj["wfNode"]=hf["wfNode"];
                      hField.push(hfObj);
                    }else{
                      hField.push(hf);
                    }
                    
                  }
                });
              });
              this.cellinfo.hField = hField; //把隐藏字段变更为调整的隐藏字段
              console.log(this.cellinfo.hField);

              this.sCell.cellinfo.table.forEach((tb, index) => {
                //在保存属性前  判断是否要清除表单单元格的table 字段类型 字段 等属性
                let clear = true;
                this.cellinfo.table.forEach((table) => {
                  if (tb.tableName == table.tableName) {
                    clear = false;
                  }
                });
                cleartalbe.push(clear);
              }); //table[0].tableName
              this.sCell.cleartalbe = cleartalbe;
              console.log(this.sCell.cleartalbe);
              let clearflow = false;

              this.sCell.cellinfo.wf.forEach((tb, index) => {
                //在保存属性前  判断是否要清除表单单元格 流程
                let clear = true;
                this.cellinfo.wf.forEach((table) => {
                  if (tb.wfClass == table.wfClass) {
                    clear = false;
                  }
                });
                clearflow = clear;
              });
              // if(this.btnList[0].params.length > 1 && this.btnList[0].params.indexOf('dblParamIn') !=-1 && this.btnList[0].params.indexOf('dblvue') !=-1 ){
              //   // this.btnList[0].formObj = JSON.stringify(JSON.parse(this.btnList[0].params))
              //   console.log(JSON.stringify(this.btnList[0].params));
              // }
              this.cellinfo.button = this.btnList;
              console.log(this.cellinfo);
              this.sCell.clearflow = clearflow;
              console.log(this.sCell.clearflow);
              this.sCell.cellinfo = this.cellinfo;
              //								this.$set(this.sCell.tableset,'initJs',this.cellinfo.initJs);//确定向tableset 传入 初始脚本，保存后的脚本
              //								this.$set(this.sCell.tableset,'afterSaveJs',this.cellinfo.afterSaveJs);
              //								this.$set(this.sCell.tableset,'beforeSendJs',this.cellinfo.beforeSendJs);
              this.$emit("ok"); 
            }, 400);
          }
        });
      }
    },
    getTableList() {
      let param = { limit: -1, start: -1, keyword: this.tbls, microId: this.dataSourceId };
      tableList(param).then((res) => {
        console.log('tableinfo',res);
        if (res.success) {
          this.tableinfo = res.info;
        }
      });
    },
    setTableIndex(item, index) {
      console.log(1111111111,item);
      this.activetableItemIndex = index;
      this.activetableItem = item;
    },
    existTable(tab) {
      //判断当前的tab是否存在
      let res = false;
      if (this.cellinfo.table) {
        this.cellinfo.table.forEach((item, index) => {
          if (item.tableName == tab) {
            res = true;
          }
        });
      }
      return res;
    },
    setKeyandParam(table, tindex) {
      if (table.pkey == null && table.param == null) {
        //当table里的  主键  运行参数为null 时
        let param = { tableName: this.cellinfo.table[tindex].tableName };
        listColumns(param).then((res) => {
          //查询table的字段  读取 主键
          if (res.success) {
            if (res.info) {
              //字段 放在 comf.comattrs[1]
              res.info.forEach((item, index) => {
                if (item.primary) {
                  table.pkey = item.name; //设置主键
                  if (tindex == 0) {
                    //主表
                    table.param = "where " + item.name + " = '[workId]' "; //设置主表运行参数
                  } else {
                    //子表  根据主表主键  设置外键  如果主表主键是id   那么外键设置mid
                    if (
                      "T_USER_MSIGN" == this.cellinfo.table[tindex].tableName
                    ) {
                      table.fkey = "mid";
                      table.param =
                        "where mid = [workId] and table_name = '" +
                        this.cellinfo.table[0].tableName +
                        "' order by ord";
                    } else {
                      if (this.cellinfo.table[0].pkey.toLowerCase() == "id") {
                        table.fkey = "mid";
                      } else {
                        table.fkey = this.cellinfo.table[0].pkey;
                      }

                      if (table.fkey == null || table.fkey == "") {
                        //根据外键是否设置  ，如果外键设置了 根据外键设置参数
                        table.param = "where mid = '[workId]' ";
                      } else {
                        table.param = "where " + table.fkey + " = '[workId]' ";
                      }
                    }
                  }
                }
              });
            }
          }
        });
      }
    },
    setSelTableIndex(item, index) {
      //保存当前点击的tableitem  和 索引
      this.activeSeltableItemIndex = index;
      this.activeSeltableItem = item;
      console.log(this.activeSeltableItem);
      this.setKeyandParam(item, index);
    },
    addTableitem() {
      //从数据库的表名新增到 cellinfo.table
      if (this.activetableItem) {
        //如果
        if (!this.existTable(this.activetableItem.name)) {
          let temp = deepCopy(this.temptable);
          this.$set(temp, "tableName", this.activetableItem.name);
          this.cellinfo.table.push(temp);
        }
      }
    },
    delTableitem() {
      //删除选中的table
      if (JSON.stringify(this.activeSeltableItem) != "{}") {
        //如果
        if (this.existTable(this.activeSeltableItem.tableName)) {
          this.cellinfo.table.splice(this.activeSeltableItemIndex, 1);
        }
        this.activeSeltableItem = {};
        this.activeSeltableItemIndex = -1;
      }
    },
    tableup() {
      //table位置上移
      if (this.activeSeltableItemIndex > 0) {
        if (JSON.stringify(this.activeSeltableItem) != "{}") {
          let temp = this.cellinfo.table[this.activeSeltableItemIndex - 1];
          this.cellinfo.table[
            this.activeSeltableItemIndex - 1
          ] = this.cellinfo.table[this.activeSeltableItemIndex];
          this.cellinfo.table[this.activeSeltableItemIndex] = temp;
          this.activeSeltableItemIndex = this.activeSeltableItemIndex - 1;
        }
      }
    },
    tabledown() {
      //表位置下移
      if (this.activeSeltableItemIndex < this.cellinfo.table.length) {
        if (JSON.stringify(this.activeSeltableItem) != "{}") {
          let temp = this.cellinfo.table[this.activeSeltableItemIndex + 1];
          this.cellinfo.table[
            this.activeSeltableItemIndex + 1
          ] = this.cellinfo.table[this.activeSeltableItemIndex];
          this.cellinfo.table[this.activeSeltableItemIndex] = temp;
          this.activeSeltableItemIndex = this.activeSeltableItemIndex + 1;
        }
      }
    },
    setord() {
      //设置table的索引
      this.cellinfo.table.forEach((item, index) => {
        this.$set(item, "ord", index);
      });
    },
    showWindVar() {
      //打开新增变量的窗口
      this.activeVar = null;
      this.showWinVar = true;
    },
    closeWinVar() {
      //关闭新增变量的窗口
      this.showWinVar = false;
    },
    existVar(val) {
      //判断 this.cellinfo.var  是否已经在 val这个变量
      let res = false;
      this.cellinfo.var.forEach((item, index) => {
        if (this.activeVar) {
          //编辑不用判断自己
          if (this.activeVarItemIndex != index) {
            if (item.name == val.name) {
              res = true;
            }
          }
        } else {
          //新增 不能名字相同
          if (item.name == val.name) {
            res = true;
          }
        }
      });
      return res;
    },
    addVar(val) {
      //新增变量 ，不能保存变量名相同的变量
      if (!this.existVar(val)) {
        if (this.activeVar) {
          this.activeVar.name = val.name;
          this.activeVar.value = val.value;
        } else {
          this.cellinfo.var.push(val);
        }
      } else {
        this.message("变量" + val.name + "已存在！", 2);
      }

      this.showWinVar = false;
    },
    setSelVarIndex(item, index) {
      //选中自定义变量 把选中的变量及索引保存起来
      this.activeVarItemIndex = index;
      this.activeVarItem = item;
    },
    delVarItem() {
      //删除选中的变量
      if (this.activeVarItem != null) {
        //如果
        if (this.existVar(this.activeVarItem)) {
          this.cellinfo.var.splice(this.activeVarItemIndex, 1);
        }
        this.activeVarItem = null;
        this.activeVarItemIndex = -1;
      }
    },
    editVar(item, index) {
      this.activeVarItemIndex = index;
      this.activeVarItem = item;
      this.activeVar = item;
      this.showWinVar = true;
    },
    varUp() {
      //table位置上移
      if (this.activeVarItemIndex > 0) {
        if (this.activeVarItem != null) {
          let temp = this.cellinfo.var[this.activeVarItemIndex - 1];
          this.cellinfo.var[this.activeVarItemIndex - 1] = this.cellinfo.var[
            this.activeVarItemIndex
          ];
          this.cellinfo.var[this.activeVarItemIndex] = temp;
          this.activeVarItemIndex = this.activeVarItemIndex - 1;
        }
      }
    },
    varDown() {
      //表位置下移
      if (this.activeVarItemIndex < this.cellinfo.var.length) {
        if (this.activeVarItem != null) {
          let temp = this.cellinfo.var[this.activeVarItemIndex + 1];
          this.cellinfo.var[this.activeVarItemIndex + 1] = this.cellinfo.var[
            this.activeVarItemIndex
          ];
          this.cellinfo.var[this.activeVarItemIndex] = temp;
          this.activeVarItemIndex = this.activeVarItemIndex + 1;
        }
      }
    },
    //获取流程类信息
    getFlowList() {
      workflowclassquery({ pageIndex: 0, pageSize: 0 }).then((res) => {
        if (res.success) {
          this.flowinfo = res.info;
        }
      });
    },
    setFlowIndex(item, index) {
      this.activeFlowItemIndex = index;
      this.activeFlowItem = item;
    },
    existFlow(tab) {
      //判断当前的tab是否存在
      let res = false;
      if (this.cellinfo.wf) {
        this.cellinfo.wf.forEach((item, index) => {
          if (item.name == tab) {
            res = true;
          }
        });
      }

      return res;
    },
    setSelFlowIndex(item, index) {
      //保存当前点击的Flowitem  和 索引
      this.activeSelFlowItemIndex = index;
      this.activeSelFlowItem = item;
    },
    addFlowitem() {
      //从数据库的表名新增到 cellinfo.wf
      if (this.activeFlowItem) {
        // if(this.cellinfo.wf.length == 0){//只能存一个流程
        if (!this.existFlow(this.activeFlowItem.name)) {
          let temp = deepCopy(this.activeFlowItem);
          this.$set(temp, "wfClass", this.activeFlowItem.id);
          this.$delete(temp, "id");
          this.cellinfo.wf.push(temp);
          console.log(this.cellinfo.wf);
        }
        // }
      }
    },
    delFlowitem() {
      //删除选中的Flow
      if (JSON.stringify(this.activeSelFlowItem) != "{}") {
        //如果
        if (this.existFlow(this.activeSelFlowItem.name)) {
          this.cellinfo.wf.splice(this.activeSelFlowItemIndex, 1);
        }
        this.activeSelFlowItem = {};
        this.activeSelFlowItemIndex = -1;
      }
    },
    flowup() {
      //Flow位置上移
      if (this.activeSelFlowItemIndex > 0) {
        if (JSON.stringify(this.activeSelFlowItem) != "{}") {
          let temp = this.cellinfo.wf[this.activeSelFlowItemIndex - 1];
          this.cellinfo.wf[this.activeSelFlowItemIndex - 1] = this.cellinfo.wf[
            this.activeSelFlowItemIndex
          ];
          this.cellinfo.wf[this.activeSelFlowItemIndex] = temp;
          this.activeSelFlowItemIndex = this.activeSelFlowItemIndex - 1;
        }
      }
    },
    flowdown() {
      //表位置下移
      if (this.activeSelFlowItemIndex < this.cellinfo.wf.length) {
        if (JSON.stringify(this.activeSelFlowItem) != "{}") {
          let temp = this.cellinfo.wf[this.activeSelFlowItemIndex + 1];
          this.cellinfo.wf[this.activeSelFlowItemIndex + 1] = this.cellinfo.wf[
            this.activeSelFlowItemIndex
          ];
          this.cellinfo.wf[this.activeSelFlowItemIndex] = temp;
          this.activeSelFlowItemIndex = this.activeSelFlowItemIndex + 1;
        }
      }
    },
    getField(tindex) {
      //查询字段
      if (tindex < this.cellinfo.table.length) {
        let param = { tableName: this.cellinfo.table[tindex].tableName };
        listColumns(param).then((res) => {
          if (res.success) {
            console.log(res.info);
            //字段 放在 comf.comattrs[1]
            this.hfield = [];
            res.info &&
              res.info.forEach((item, index) => {
                let obj = {
                  tableIdx: tindex,
                  fieldName: item.name,
                  isHide: 1,
                  fieldType: item.datatype,
                  wfNode: "999999",
                  code: this.cellinfo.table[tindex].tableName,
                };
                this.hfield.push(obj);
              });
          }
        });
      }
    },
    sethfieldIndex(item, index) {
      this.activehfieldItemIndex = index;
      this.activehfieldItem = item;
      console.log(item);
    },
    existhfield(tab) {
      //判断当前的tab是否存在
      let res = false;
      if (this.cellinfo.hField) {
        this.cellinfo.hField.forEach((item, index) => {
          if (item.fieldName == tab) {
            res = true;
          }
        });
      }
      return res;
    },
    setSelhfieldIndex(item, index) {
      //保存当前点击的hfielditem  和 索引
      this.activeSelhfieldItemIndex = index;
      this.activeSelhfieldItem = item;
    },
    showFieldWin(item) {
      this.field = item;
      this.showfield = true;
    },
    setfield(v) {
      this.cellinfo.hField[this.activeSelhfieldItemIndex] = v;
      this.showfield = false;
    },
    addhfielditem() {
      //从数据库的表名新增到 cellinfo.hField
      if (this.activehfieldItem) {
        //如果
        if (!this.existhfield(this.activehfieldItem.fieldName)) {
          let temp = deepCopy(this.activehfieldItem);
          this.cellinfo.hField.push(temp);
        }
      }
    },
    delhfielditem() {
      //删除选中的hfield
      if (JSON.stringify(this.activeSelhfieldItem) != "{}") {
        //如果
        if (this.existhfield(this.activeSelhfieldItem.fieldName)) {
          this.cellinfo.hField.splice(this.activeSelhfieldItemIndex, 1);
        }
        this.activeSelhfieldItem = {};
        this.activeSelhfieldItemIndex = -1;
      }
    },
    hfieldup() {
      //hfield位置上移
      if (this.activeSelhfieldItemIndex > 0) {
        if (JSON.stringify(this.activeSelhfieldItem) != "{}") {
          let temp = this.cellinfo.hField[this.activeSelhfieldItemIndex - 1];
          this.cellinfo.hField[
            this.activeSelhfieldItemIndex - 1
          ] = this.cellinfo.hField[this.activeSelhfieldItemIndex];
          this.cellinfo.hField[this.activeSelhfieldItemIndex] = temp;
          this.activeSelhfieldItemIndex = this.activeSelhfieldItemIndex - 1;
        }
      }
    },
    hfielddown() {
      //表位置下移
      if (this.activeSelhfieldItemIndex < this.cellinfo.hField.length) {
        if (JSON.stringify(this.activeSelhfieldItem) != "{}") {
          let temp = this.cellinfo.hField[this.activeSelhfieldItemIndex + 1];
          this.cellinfo.hField[
            this.activeSelhfieldItemIndex + 1
          ] = this.cellinfo.hField[this.activeSelhfieldItemIndex];
          this.cellinfo.hField[this.activeSelhfieldItemIndex] = temp;
          this.activeSelhfieldItemIndex = this.activeSelhfieldItemIndex + 1;
        }
      }
    },
    // 关联窗体
    handleComSelect() {
      this.relatedPageShow = true;
    },
    //点击按钮列表
    setBtnIndex(item, index) {
      console.log(index);
      this.btnIndex = index;
      this.newBtn = false;
      this.newBtnBtn = false;
      if (typeof this.btnList[index].formObj != "undefined") {
        if (this.btnList[index].formObj !== null) {
          this.formObj=JSON.parse(this.btnList[index].formObj);
          this.formObjName = JSON.parse(this.btnList[index].formObj).dblcomText;
        } else {
          this.formObjName = "";
        }
      }
    },
    clearBtnItem() {
      this.btnData.name = "";
      this.btnData.code = "";
      this.btnData.contentType = "";
      this.btnData.url = "";
      this.btnData.params = "";
      this.btnData.formType = 1;
      this.btnData.formObj = "";
      this.btnData.executeType = 0;
      this.btnData.wfNode = "999999";
    },
    //新增按钮设置
    addBtnitem() {
      this.clearBtnItem();
      this.newBtn = true;
      this.newBtnBtn = true;
    },
    // 按钮列表删除
    delBtnitem() {
      console.log(this.btnIndex);
      console.log(this.btnList[this.btnIndex]);
      this.btnList.splice(this.btnIndex, 1);
      this.clearBtnItem();
      this.newBtn = true;
    },
    swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    // 按钮列表上移
    btnup() {
      if (this.btnIndex > 0) {
        this.swapArray(this.btnList, this.btnIndex - 1, this.btnIndex);
        this.btnIndex = this.btnIndex - 1;
      }
    },
    // 按钮列表下移
    btndown() {
      if (this.btnIndex < this.btnList.length - 1) {
        this.swapArray(this.btnList, this.btnIndex, this.btnIndex + 1);
        this.btnIndex = this.btnIndex + 1;
      }
    },
    //新增按钮设置确定
    addBtnCreate() {
      let data = deepCopy(this.btnData);
      this.btnList.push(data);
      this.newBtn = false;
      this.newBtnBtn = false;
      this.btnIndex = this.btnList.length - 1;
    },
    addBtnCancle() {
      if (this.btnList.length == 0) {
        this.newBtn = true;
      } else {
        this.newBtn = false;
      }
      this.newBtnBtn = false;
    },
    closeWinCom() {
      this.relatedPageShow = false;
    },
    saveWinCom(info) {
      // 点击确定，获取的弹框信息
      if (this.newBtn) {
        this.btnData.formObj = JSON.stringify(info);
      } else {
        this.btnList[this.btnIndex].formObj = JSON.stringify(info);
      }
      this.formObjName = info.dblcomText;
      this.relatedPageShow = false;
      console.log('弹窗关联参数',this.btnList);
    },
    // inputClick(e) {
    //   this.wfCheckboxMap = {};
    //   this.tdcom && this.tdcom.comattrs && this.tdcom.comattrs.wfNode &&
    //     this.tdcom.comattrs.wfNode.map((item) => {
    //       this.wfCheckboxMap[item] = true;
    //     });
    //   const Y = e.clientY + 15;
    //   this.wfPositionStyle = "right:0px;top:" + Y + "px;";
    //   setTimeout(() => {
    //     this.inputClick = true;
    //   }, 250);
    // },
     wfTypeChange(val) {
      if (val === 9) { //禁用
        this.wfChoosable = true
        this.tdcom.comattrs.wfNode = [0]
        this.wfNames = '禁用'
      } else if (val === 6) {
        this.tdcom.comattrs.wfNode = [999999]
        this.wfNames = '全部'
        this.wfChoosable = true
      } else {
        this.wfChoosable = true
        this.wfChoosable = false
        let arr = []
        for (let id in this.wfCheckboxMap){
            if(this.wfCheckboxMap[id]&&this.wfNodeMapHash[id]) arr.push(this.wfNodeMapHash[id])
        }
        this.wfNames = arr.join(',')
      }
    },
    wfNodeChange() {
      let arr = []
      for (let key in this.wfCheckboxMap) {
          if(this.wfCheckboxMap[key]&&this.wfNodeMapHash[key]){
            arr.push(key)
          }
      }
      this.tdcom.comattrs.wfNode = arr
      this.getWfNodeNames(arr)
    },
    winTypeChange() {
      if(this.btnList[this.btnIndex].executeType == 1 && this.btnList[this.btnIndex].formType !== 2) {
        console.log('前',this.formObj);
        this.formObjName = ''
        this.formObj = null
        console.log('后',this.formObj);
      }
    },
    opCode(e){
      this.CodeDialogVisible = true
      setTimeout(() => {
        this.$refs.codeMirrorIDERef.editorValue = e
      }, 100);
    },
    codeDialogVisible(btnIndex){
      this.btnList[btnIndex].params = this.$refs.codeMirrorIDERef.editorValue
      this.CodeDialogVisible = false
    },
    opCode1(e){
      if(this.newBtnBtn){
        this.CodeDialogVisible1 = true
        setTimeout(() => {
          this.$refs.codeMirrorIDERef.editorValue = e
        }, 100);
      }
    },
    codeDialogVisible1(){
      this.btnData.params = this.$refs.codeMirrorIDERef.editorValue
      this.CodeDialogVisible1 = false
    },
    codeFormatte(){
      this.$refs.codeMirrorIDERef.codeFormat();
    },
    writeScp(text){
      if(text){
        this.$refs.codeMirrorIDERef.insertCodemirror(text);
      }
    },
    initSql1(){
      let _this = this
      this.CodeDialogVisible2 = true
      if(this.cellinfo.initSql){
        setTimeout(() => {
        _this.$refs.codeMirrorIDERef.editorValue = _this.cellinfo.initSql
      }, 100);
      }
    },
    initJs1(){
      let _this = this
      this.CodeDialogVisible3 = true
      if(this.cellinfo.initJs){
        setTimeout(() => {
        _this.$refs.codeMirrorIDERef.editorValue = _this.cellinfo.initJs
      }, 100);
      }
      
    },
    afterSaveJs1(){
      let _this = this
      this.CodeDialogVisible4 = true
      if(this.cellinfo.afterSaveJs){
        setTimeout(() => {
        _this.$refs.codeMirrorIDERef.editorValue = _this.cellinfo.afterSaveJs
      }, 100);
      }
      
    },
    beforeSendJs1(){
      let _this = this
      this.CodeDialogVisible5 = true
      if(this.cellinfo.beforeSendJs){
        setTimeout(() => {
        _this.$refs.codeMirrorIDERef.editorValue = _this.cellinfo.beforeSendJs
      }, 100);
      }
      
    },
    codeDialogVisible2(){
      this.cellinfo.initSql = this.$refs.codeMirrorIDERef.editorValue
      this.CodeDialogVisible2 = false
    },
    codeDialogVisible3(){
      this.cellinfo.initJs = this.$refs.codeMirrorIDERef.editorValue
      this.CodeDialogVisible3 = false
    },
    codeDialogVisible4(){
      this.cellinfo.afterSaveJs = this.$refs.codeMirrorIDERef.editorValue
      this.CodeDialogVisible4 = false
    },
    codeDialogVisible5(){
      this.cellinfo.beforeSendJs = this.$refs.codeMirrorIDERef.editorValue
      this.CodeDialogVisible5 = false
    },
  },
};
</script>

<style scoped>
.mask {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  background: var(--win-head-back-color);
  margin: 4px;
  text-align: left;
}
.header .title {
  width: calc(100% - 25px);
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--system-page-topbar-text-color);
  margin-left: 12px;
}
.header .close {
  font-size: 12px;
  width: 12px;
  height: 12px;
  margin-right: 9px;
}

.body {
  flex-direction: row;
  width: 100%;
  padding: 12px 17px;
  height: calc(100% - 127px);
  color: var(--page-lable-text-color);
}
.body-head {
  height: 32px;
  display: flex;
  width: 100%;
  margin: 12px 0;
}
/*/头部描述 版本 描述 样式*/
.head-item-left {
  width: 140px;
  display: flex;
  height: 32px;
  margin-right: 10px;
}
.head-item-center {
  width: 124px;
  display: flex;
  height: 32px;
  margin-right: 10px;
}
/*下拉框箭头*/
>>> .el-select__caret {
  line-height: 30px;
}
.head-item-right {
  width: 432px;
  display: flex;
  height: 32px;
}

.head-lable {
  width: 66px;
  line-height: 32px;
}
.body-content {
  width: 100%;
  height: calc(100% - 96px);
}
.row-title {
  height: 32px;
  width: 100%;
  text-align: left;
  line-height: 32px;
  display: flex;
}
.row-title-first {
  width: 307px;
}
.row-title-second {
  margin-left: 50px;
  width: 229px;
}
.row-title-third {
  width: 80px;
  height: 29px;
  border-radius: 4px;
  text-align: center;
  color: var(--text-color);
  line-height: 29px;
  margin-top: 2px;
}
.row-title-third:hover {
  background: var(--button-hover-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}
.row-title-third:active {
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}
/*每行样式*/
.row {
  display: flex;
  height: 32px;
  margin: 0 0 16px 0;
  width: 100%;
  position: relative;
}
/*每行元素的高度*/
.row-item-one,
.row-item-two,
.row-item-three,
.row-item-right {
  display: flex;
  height: 32px;
}
.row-item-one {
  width: 100%;
}
.row-item-two {
  width: calc(50% - 5px);
}
.row-item-three {
  width: calc(33.3% - 6px);
}
.row-item-right {
  margin-left: 10px;
}
/*输入框前的标签样式*/
.row-item-lable {
  width: 80px;
  min-width: 80px;
  line-height: 32px;
}
/*element 输入框样式*/
>>> .el-input__inner {
  line-height: 30px;
  height: 30px;
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
/*tabs 样式*/
.el-tabs {
  height: 100%;
}
>>> .el-tabs__active-bar {
  width: 95px !important;
  left: -13px;
}
>>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 0px;
}
>>> .el-tabs__item {
  padding: 0 10px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--disable-text-color);
}
/*活动颜色*/
>>> .el-tabs__item.is-active {
  color: var(--active-color);
}
/*tabs 分割线*/
>>> .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: var(--tab-line-color);
}
/*选数据库表区域*/
.tables {
  display: flex;
  width: 100%;
  height: 222px;
  padding: 10px 0 20px 0;
}
.setHeight {
  height: 350px;
}
.db-table {
  width: 331px;
  height: 100%;
  overflow-y: auto;
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  padding: 3px 0;
}
/*/选表  选记录的 样式*/
.div-item {
  width: 400px;
  height: 32px;
  line-height: 32px;
  padding: 0px 9px;
  text-align: left;
}
.div-item:hover {
  background: var(--button-hover-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}
.div-item-active {
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

/*中间按钮区域*/
.toolbtns {
  width: 52px;
  padding: 0 11px;
  height: 240px;
}
.settop {
  margin-top: 100px;
}
.toolbtn {
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-bottom: 10px;
  color: rgba(144, 162, 175, 1);
}
.toolbtn:hover {
  background: var(--button-hover-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}
.toolbtn:active {
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}
/*表单背景宽高设置*/
.open-content {
  min-width: 600px;
  background: var(--win-page-back-color);
  box-shadow: 0px 10px 20px 0px var(--win-page-shadow-color),
    0px -10px 20px 0px var(--win-page-shadow-color);
  border-radius: 4px;
  overflow: hidden;
  animation: myscale 0.4s;
}

/*表单打开动画*/
@keyframes myscale {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*表单关闭样式及动画*/
.open-content-hide {
  background: var(--win-page-back-color);
  box-shadow: 0px 10px 20px 0px var(--win-page-shadow-color),
    0px -10px 20px 0px var(--win-page-shadow-color);
  border-radius: 4px;
  overflow: hidden;
  animation: myscalehide 0.4s;
  transform: scale(0.6);
  opacity: 0;
}

@keyframes myscalehide {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-120px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
>>> .el-textarea__inner {
  /* min-height: 362px !important;
		height: 362px !important; */
}
/*element 输入框的 focus hover样式*/
>>> .el-input__inner:focus,
>>> .el-textarea__inner:focus {
  background: var(--input-focus-back-color);
  border: 1px solid var(--input-focus-border-color);
  border-radius: 4px;
}

>>> .el-input__inner:hover,
>>> .el-textarea__inner:hover {
  background: var(--input-hover-back-color);
  border: 1px solid var(--input-focus-border-color);
}
>>> .el-textarea__inner {
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
>>> .el-form-item__label,
>>> .el-checkbox__label {
  color: var(--page-lable-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
.pkey-input >>> .el-input__inner {
  width: 180px;
}
.param-input >>> .el-input__inner {
  width: 584px;
}
.wrong-div {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 5px;
}
.footer {
  padding-right: 20px;
  height: 60px;
  line-height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.el-checkbox {
  margin: auto 0;
}
.btn {
  margin: 0 5px;
}
.btnEdit {
  
}
.btnAdd {
  height: 340px;
  overflow-y: auto;
}
.wfDialog {
  position: absolute;
  width: 230px;
  height: 320px;
  overflow: auto;
  background-color: #fff;
  box-shadow: 0px 0px 20px -1px rgba(0, 0, 0, 0.75);
  padding: 0 12px;
  padding-top: 12px;

  .el-radio-group {
    width: 100%;
    text-align: left;

    .el-radio {
      margin-right: 8px;
    }
  }

  .wfMapStyle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    font-size: 14px;

    .wfName {
      display: inline-block;
      width: 100%;
      border-bottom: 1px solid #ccc;
      text-align: left;
      padding: 6px 0;
      color: rgb(153, 153, 153);
    }

    .el-checkbox ::v-deep .el-checkbox__label {
      font-size: 14px;
    }
  }
}
</style>

